<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        select{
            width: 130px;
            height: 50px;
            background-color: rgb(252, 68, 175);
            color: rgb(255, 255, 255);
        }
        select:hover{
            color: chartreuse;
            background-color: rgb(169, 9, 254);
        }
    </style>
    <!-- 主要 -->
    <select id="province">
        <option>选择省份</option>
        <option>湖北省</option>
        <option>湖南省</option>
        <option>山东省</option>
    </select>
    <!-- 显示市 -->
    <select id="city">
        <option>选择市区</option>
    </select>
    <select  id="small">选择区</select>
<!-- js区域 -->
<script>


var small=document.querySelector('#small')

document.querySelector('#province').onclick=function(){
    var res=document.querySelector('#province').value
    if (res=='湖北省') {
        city.innerHTML=
        '<option>武汉市</option> <option>荆州市</option> <option>宜昌市</option> <option>襄阳市</option>'
    }
    if (res=='湖南省') {
        city.innerHTML=
        '<option>长沙市</option> <option>株洲市</option> <option>衡阳市</option> <option>邵阳市</option>'
    }
    if (res=='山东省') {
        city.innerHTML=
        '<option>烟台市</option> <option>青岛市</option> <option>济南市</option> <option>枣庄市</option>'
    }
    
}

city.onclick=function(){
    var sum=document.querySelector('#city').value
    if(sum=='武汉市'){
        small.innerHTML='<option>仙女区</option> '
    }
    if(sum=='荆州市'){
        small.innerHTML='<option>男神区</option> '
    }
    if(sum=='宜昌市'){
        small.innerHTML='<option>天堂区</option> '
    }
    if(sum=='襄阳市'){
        small.innerHTML='<option>学妹区</option> '
    }
    if(sum=='长沙市'){
        small.innerHTML='<option>游戏区</option> '
    }
    if(sum=='株洲市'){
        small.innerHTML='<option>校园区</option> '
    }
    if(sum=='衡阳市'){
        small.innerHTML='<option>休闲区</option> '
    }
    if(sum=='邵阳市'){
        small.innerHTML='<option>娱乐区</option> '
    }
    if(sum=='烟台市'){
        small.innerHTML='<option>鲍鱼区</option> '
    }
    if(sum=='青岛市'){
        small.innerHTML='<option>海参区</option> '
    }
    if(sum=='济南市'){
        small.innerHTML='<option>生蚝区</option> '
    }
    if(sum=='枣庄市'){
        small.innerHTML='<option>牡蛎区</option> '
    }
}


</script>

</body>
</html>
